.header{
	width:100%;
	background:#000;
	color:#fff;
	font-family: Ltb;
	padding-top:45px;
}

.header::after{
	content:"";
	width:0;
	height:0;
	display: block;
	clear:both;
	overflow: hidden;
}

.logo{
	font-size:24px;
	font-family: Ltb;
	text-transform:uppercase;
	color:#fff;
	float:left;
	margin-bottom: 30px;
	margin-top:5px;
	transition:all .2s linear;
}

.logo:hover{
	transform:scale(1.5);
}

.nav{
	float:right;
	overflow: hidden;
}

.nav a{
	text-transform:uppercase;
	font-family: Ltb;
	color:#fff;
	border-bottom:3px solid #292929;
	font-size:14px;
	padding:0 15px;
	height:40px;
	line-height:40px;
	transition: all .3s ease-in-out;
}

.nav a:hover{
	border-bottom:3px solid #fcac45;
}

#nav{
	display: none;
}

.menu{
	width:50px;
	height:50px;
	float:right;
	cursor: pointer;
	display: none;
	margin-right:10px;
}

.menu span{
	width:80%;
	height:5px;
	background:#fff;
	float:left;
	margin:9px auto 0;
}

/* header end */

.banner{
	width:100%;
	padding-top:140px;
	text-align:center;
	
}

#bgvid{
	width: 100%;
	height: 649px;
	position: absolute;
	overflow: hidden;
	object-fit: fill;
	top: 0;
	left: 0;
	z-index: -2;
}
.banner h1{
	font-family: Osl;
	font-size:44px;
	text-transform: uppercase;
	color:#999999;
}

.banner h1 span{
	color:#fcac45;
	font-family: osb;
}

.banner a{
	width:50px;
	height:50px;
	background:url('../images/banner_btn.png') no-repeat left top;
	overflow: hidden;
	border:1px solid #c3c3c3;
	border-radius: 100%;
	margin-top:190px;
	margin-bottom:90px;
}

/* banner end */
.about{
	width:100%;
	padding-top:100px;
}

.about_box{
	width:100%;
	padding-bottom:100px;
	background:url('../images/about_bg.png') no-repeat 15px top;
}

.about_box:after{
	content:"";
	display: block;
	clear: both;
	width:0px;
	height:0px;
	overflow: hidden;
}

.about_content{
	width:40%;
	float:right;
	text-align:left;
	overflow: hidden;
}

.about_content h3{
	font-size:18px;
	font-family: Osl;
	text-transform:uppercase;
	text-indent: 4px;
}

.about_content h1{
	text-transform: uppercase;
	font-size:35px;
	font-family: Osb;
	line-height:60px;
	height:60px;
	white-space: nowrap;
}

.about_content h1 span:first-child{
	border-bottom:5px solid #fcac45;
}

.about_content h1 span:last-child{
	font-family: Ossb;
}

.about_content p{
	margin-top:32px;
	color:#6c6c6c;
	margin-bottom:50px;
}

.about_content ul li{
	background:url('../images/about_ul_bg.png') no-repeat left center;
	text-indent:15px;
	font-size:18px;
	color:#6c6c6c;
	line-height:30px;
	height:30px;
	white-space: nowrap;
}

.about_content ul li span{
	font-family: Ossb;
	margin-right:2px;
}

.about_content .btn{
	background:#fff url('../images/about_btn.png') no-repeat 20px 16px;
	margin-top:53px;
	height:45px;
	line-height:45px;
	border:1px solid #6c6c6c;
	border-radius: 5px;
	padding:0px 24px;
	padding-left:40px;
	text-transform: uppercase;
	transition: all .5s ease-in-out;
}

.about_content .btn:hover{
	background:rgba(94,94,94,.3) url('../images/about_btn.png') no-repeat 20px 16px;
}

/* about end */

.team{
	width:100%;
	background:#000;
	text-align:center;
	padding:55px 0px;
}

.team-title{
	font-size:44px;
	text-transform:uppercase;
	color:#fff;
	background:url('../images/team-title-bg.png') no-repeat center bottom;
	padding-bottom:20px;
	margin-bottom:90px;
}

.team-title span{
	font-family: Ossb;
}

.teamlist{
	width:100%;
	display: flex;
}

.teamlist>div{
	flex-basis: 25%;
}

.teamlist .image{
	width:130px;
	height:130px;
	overflow: hidden;
	border:0px; 
	border-radius: 100%;
	margin:0 auto;
}

.teamlist .image img{
	width:100%;
	height:100%;
}

.teamlist h3{
	font-family: Ossb;
	font-size:20px;
	color:#fff;
	text-transform: capitalize;
	margin-top:22px;
}

.teamlist span{
	color:#fff;
	text-transform: capitalize;
}

.teamlist p{
	margin-top:40px;
	color:#fff;
}

.teammore{
	width:100%;
	text-align:center;
}

.teammore label span{
	width:10px;
	height:10px;
	background-color:#fff;
	border-radius: 1px;
	margin-right:10px;
	margin-top:74px;
	cursor: pointer;
	transition: all .2s ease;
}

.teammore label span:hover{
	background:#fcac45;
}
input[id="img1"],
input[id="img2"],
input[id="img3"]{
	display: none;
}
.run1{
	display:flex;
}
.run2{
	display: none;
}
.run3{
	display: none;
}
input[id="img1"]:checked~.run1{
	display: flex;
}
input[id="img1"]:checked ~ .teammore label:nth-child(1) span{
	background:#fcac45;
}

input[id="img1"]:checked~.run2,
input[id="img1"]:checked~.run3{
	display: none;
}

input[id="img2"]:checked~.run2{
	display: flex;
}
input[id="img2"]:checked ~ .teammore label:nth-child(2) span{
	background:#fcac45;
}
input[id="img2"]:checked~.run1,
input[id="img2"]:checked~.run3{
	display: none;
}
input[id="img3"]:checked~.run3{
	display: flex;
}
input[id="img3"]:checked ~ .teammore label:nth-child(3) span{
	background:#fcac45;
}
input[id="img3"]:checked~.run1,
input[id="img3"]:checked~.run2{
	display: none;
}
/* .about end */

.services{
	width:100%;
	background:#fff;
	padding:100px 0px;
	text-align:center;
}

.services-title{
	font-size:44px;
	text-transform: uppercase;
	background:url('../images/services-title-bg.png') no-repeat center bottom;
	padding-bottom:20px;
	margin-bottom:41px;
}

.services-title span{
	font-family: Ossb;
}

.services-desc{
	color:#808080;
	font-family: Osi;
}

.serviceslist{
	display: flex;
	margin-top:106px;
}

.serviceslist>div{
	flex-basis: 25%;
}

.serviceslist .image{
	border:6px solid #fcac45;
	border-radius: 100%;
	width:50%;
	overflow: hidden;
	background:#fff;
	text-align:center;
	margin:0 auto;
	transition:border .5s ease;
}
.serviceslist .image:hover{
	border: 6px solid #81e70c;
	cursor: pointer;
}
.serviceslist .image img{
	width:100%;
	height:100%;
}

.serviceslist h3{
	font-family: Ossb;
	font-size:25px;
	text-transform: uppercase;
	margin:28px 0px;
	overflow: hidden;
}

.serviceslist p{
	color:#595959;
}

/* services end */
.clients{
	width:100%;
	text-align:center;
	background:#000;
	padding:55px 0px;
}
.container-img1{
	position: relative;
	display: block;
}
.container-img2,.container-img3{
	position: relative;
	display: none;
}
input[name="container-image"]{
	display: none;
}
input[id="clients-img1"]:checked~.container-img1{
	display: block;
}
input[id="clients-img1"]:checked ~ .clientsmore label:nth-child(1) span{
	background:#fcac45;
}

input[id="clients-img1"]:checked~.container-img2,
input[id="clients-img1"]:checked~.container-img3{
	display: none;
}

input[id="clients-img2"]:checked~.container-img2{
	display: block;
}input[id="clients-img2"]:checked ~ .clientsmore label:nth-child(2) span{
	background:#fcac45;
}

input[id="clients-img2"]:checked~.container-img1,
input[id="clients-img2"]:checked~.container-img3{
	display: none;
}

input[id="clients-img3"]:checked~.container-img3{
	display: block;
}
input[id="clients-img3"]:checked ~ .clientsmore label:nth-child(3) span{
	background:#fcac45;
}

input[id="clients-img3"]:checked~.container-img1,
input[id="clients-img3"]:checked~.container-img2{
	display: none;
}
.clients-title{
	font-size:44px;
	text-transform:uppercase;
	color:#fff;
	background:url('../images/team-title-bg.png') no-repeat center bottom;
	padding-bottom:20px;
	margin-bottom:90px;
}

.clients-title span{
	font-family: Ossb;

}

.clientslist{
	width:100%;
	display: flex;
}

.clientslist>div{
	flex-basis: 20%;
}

.clientslist .image{
	overflow: hidden;
	border:0px; 
	margin:0 auto;
}

.clientslist .image img{
	width:100%;
	height:100%;
}

.clientsmore{
	width:100%;
	text-align:center;
}

.clientsmore label span{
	width:10px;
	height:10px;
	background-color:#fff;
	border-radius: 1px;
	margin-right:10px;
	margin-top:74px;
	cursor: pointer;
	transition: all .2s ease;
}

.clientsmore label span:hover{
	background:#fcac45;
}

/* clients end */
.work{
	width:100%;
	text-align:center;
	background:#fff;
	padding:100px 0px;
}

.work-title{
	font-size:44px;
	text-transform: uppercase;
	background:url('../images/services-title-bg.png') no-repeat center bottom;
	padding-bottom:20px;
	margin-bottom:41px;
}

.work-title span{
	font-family: Ossb;
}

.work-desc{
	color:#808080;
	font-family: Osi;
	margin-bottom:110px;
}

.work-header{
	margin-bottom:50px;
}

.work-list-title{
	float:left;
	font-family: Ossb;
	font-size:18px;
	text-transform:uppercase;
}

.work-nav{
	float:right;

}

.work-nav label{
	border-right:1px solid #6c6c6c;
	padding:0px 15px;
	text-transform: capitalize;
	font-size:18px;
	cursor: pointer;
}

.work-nav label:last-child{
	border-right:none;
}

.work-header::after{
	content:"";
	width:0;
	height:0;
	overflow: hidden;
	display: block;
	clear: both;
}

.work-data{
	column-count: 4;
	column-gap:30px;
}

.work-data>div{
	margin-bottom:25px;
	cursor: pointer;
}

.work-data .image img{
	width:100%;
	height:100%;
}

/* work轮播图片 */

.worklist-image1{
	display: block;
}

.worklist-image1-a{
	display: block;
}

.worklist-image2-a,
.worklist-image3-a,
.worklist-image4-a{
	display: none;
}

input[name="worklist-image"]{
	display: none;
}

input[id="worklist-image1"]:checked ~ .worklist-image1-a{
	display: block;
}

input[id="worklist-image1"]:checked ~ .work-header .work-nav label:nth-child(1){
	color: #000;
	font-weight: bold;
}

input[id="worklist-image1"]:checked ~ .worklist-image2-a,
input[id="worklist-image1"]:checked ~ .worklist-image3-a,
input[id="worklist-image1"]:checked ~ .worklist-image4-a{
	display: none;
}

input[id="worklist-image2"]:checked ~ .worklist-image2-a{
	display: block;
}

input[id="worklist-image2"]:checked ~ .work-header .work-nav label:nth-child(2){
	font-weight: bold;
	color: #000;
}

input[id="worklist-image2"]:checked ~ .worklist-image1-a,
input[id="worklist-image2"]:checked ~ .worklist-image3-a,
input[id="worklist-image2"]:checked ~ .worklist-image4-a{
	display: none;
}

input[id="worklist-image3"]:checked ~ .worklist-image3-a{
	display: block;
}

input[id="worklist-image3"]:checked ~ .work-header .work-nav label:nth-child(3){
	font-weight: bold;
	color: #000;
}

input[id="worklist-image3"]:checked ~ .worklist-image1-a,
input[id="worklist-image3"]:checked ~ .worklist-image2-a,
input[id="worklist-image3"]:checked ~ .worklist-image4-a{
	display: none;
}

input[id="worklist-image4"]:checked ~ .worklist-image4-a{
	display: block;
}

input[id="worklist-image4"]:checked ~ .work-header .work-nav label:nth-child(4){
	font-weight: bold;
	color: #000;
}

input[id="worklist-image4"]:checked ~ .worklist-image1-a,
input[id="worklist-image4"]:checked ~ .worklist-image2-a,
input[id="worklist-image4"]:checked ~ .worklist-image3-a{
	display: none;
}

/* work图片hover */
.clean{
	content:"";
	width:0;
	height:0;
	overflow: hidden;
	display: block;
	clear:both;
}

.work-data .image{
	position: relative;
	/* z-index:-1; */
} 

.img-title{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	top: 0;
	left: 0;
	z-index: 1;
	display: none;
}
.img-title span:nth-child(1){
	color: #fff;
	font-size: 20px;
	display: block;
	font-family: Ossb;
	margin-top: 65px;
	margin-bottom: 15px;
}
.img-title span:nth-child(2){
	color: #fff;
	font-size: 14px;
	font-family: Ossb;
	display: block;
	margin-bottom: 30px;
}
.worklist-image1-a div:nth-child(1):hover > .img-title,
.worklist-image1-a div:nth-child(2):hover > .img-title,
.worklist-image1-a div:nth-child(3):hover > .img-title,
.worklist-image1-a div:nth-child(4):hover > .img-title,
.worklist-image1-a div:nth-child(5):hover > .img-title,
.worklist-image1-a div:nth-child(6):hover > .img-title,
.worklist-image1-a div:nth-child(7):hover > .img-title,
.worklist-image1-a div:nth-child(8):hover > .img-title,
.worklist-image1-a div:nth-child(9):hover > .img-title,
.worklist-image1-a div:nth-child(10):hover > .img-title,
.worklist-image1-a div:nth-child(11):hover > .img-title,
.worklist-image1-a div:nth-child(12):hover > .img-title,
.worklist-image2-a div:nth-child(1):hover > .img-title,
.worklist-image2-a div:nth-child(2):hover > .img-title,
.worklist-image2-a div:nth-child(3):hover > .img-title,
.worklist-image2-a div:nth-child(4):hover > .img-title,
.worklist-image2-a div:nth-child(5):hover > .img-title,
.worklist-image2-a div:nth-child(6):hover > .img-title,
.worklist-image2-a div:nth-child(7):hover > .img-title,
.worklist-image2-a div:nth-child(8):hover > .img-title,
.worklist-image2-a div:nth-child(9):hover > .img-title,
.worklist-image2-a div:nth-child(10):hover > .img-title,
.worklist-image2-a div:nth-child(11):hover > .img-title,
.worklist-image2-a div:nth-child(12):hover > .img-title,
.worklist-image3-a div:nth-child(1):hover > .img-title,
.worklist-image3-a div:nth-child(2):hover > .img-title,
.worklist-image3-a div:nth-child(3):hover > .img-title,
.worklist-image3-a div:nth-child(4):hover > .img-title,
.worklist-image3-a div:nth-child(5):hover > .img-title,
.worklist-image3-a div:nth-child(6):hover > .img-title,
.worklist-image3-a div:nth-child(7):hover > .img-title,
.worklist-image3-a div:nth-child(8):hover > .img-title,
.worklist-image3-a div:nth-child(9):hover > .img-title,
.worklist-image3-a div:nth-child(10):hover > .img-title,
.worklist-image3-a div:nth-child(11):hover > .img-title,
.worklist-image3-a div:nth-child(12):hover > .img-title,
.worklist-image4-a div:nth-child(1):hover > .img-title,
.worklist-image4-a div:nth-child(2):hover > .img-title,
.worklist-image4-a div:nth-child(3):hover > .img-title,
.worklist-image4-a div:nth-child(4):hover > .img-title,
.worklist-image4-a div:nth-child(5):hover > .img-title,
.worklist-image4-a div:nth-child(6):hover > .img-title,
.worklist-image4-a div:nth-child(7):hover > .img-title,
.worklist-image4-a div:nth-child(8):hover > .img-title,
.worklist-image4-a div:nth-child(9):hover > .img-title,
.worklist-image4-a div:nth-child(10):hover > .img-title,
.worklist-image4-a div:nth-child(11):hover > .img-title,
.worklist-image4-a div:nth-child(12):hover > .img-title{
	display: block;
}


/* work end */
.test{
	width:100%;
	text-align:center;
	background:#000;
	padding:55px 0px;
}

.test-title{
	font-size:44px;
	text-transform:uppercase;
	color:#fff;
	background:url('../images/team-title-bg.png') no-repeat center bottom;
	padding-bottom:20px;
	margin-bottom:90px;
}

.test-title span{
	font-family: Ossb;
}

.test-desc{
	margin-bottom:52px;
}

.test-desc:last-of-type{
	margin-bottom:0px;
}

.testmore{
	width:100%;
	text-align:center;
}

.testmore label span{
	width:10px;
	height:10px;
	background-color:#fff;
	border-radius: 1px;
	margin-right:10px;
	margin-top:74px;
	cursor: pointer;
	transition: all .2s ease;
}

.testmore label span:hover{
	background:#fcac45;
}

/* test轮播图 */
.test-image1{
	display: block;
}
.test-image2,.test-image3{
	display: none;
}
input[name="test-img"]{
	display: none;
}

input[id="test-img1"]:checked ~ .test-image1{
	display: block;
}

input[id="test-img1"]:checked ~ .testmore label:nth-child(1) span{
	background:#fcac45;
}

input[id="test-img1"]:checked ~ .test-image2,
input[id="test-img1"]:checked ~ .test-image3{
	display: none;
}

input[id="test-img2"]:checked ~ .test-image2{
	display: block;
}

input[id="test-img2"]:checked ~ .testmore label:nth-child(2) span{
	background:#fcac45;
}

input[id="test-img2"]:checked ~ .test-image1,
input[id="test-img2"]:checked ~ .test-image3{
	display: none;
}

input[id="test-img3"]:checked ~ .test-image3{
	display: block;
}

input[id="test-img3"]:checked ~ .testmore label:nth-child(3) span{
	background:#fcac45;
}

input[id="test-img3"]:checked ~ .test-image1,
input[id="test-img3"]:checked ~ .test-image2{
	display: none;
}

/* test end  */
.contact{
	width:100%;
	text-align:center;
	background:#fff;
	padding:100px 0px;
}

.contact-title{
	font-size:44px;
	text-transform: uppercase;
	background:url('../images/services-title-bg.png') no-repeat center bottom;
	padding-bottom:20px;
	margin-bottom:41px;
}

.contact-title span{
	font-family: Ossb;
}

.contact-desc{
	color:#808080;
	font-family: Osi;
	margin-bottom:110px;
}

.contact-form{
	margin-top:100px;
}

.contact-row>div{
	width:50%;
	display: inline-block;
	float:left;
	text-align:left;
}

.contact-row>div input{
	width:90%;
	height:40px;
	line-height:40px;
	font-size:20px;
}

.contact-row>div input::placeholder{
	font-size:20px;
}

.contact-row>div h4{
	text-transform: capitalize;
}

.contact-row>div h4 sup{
	color:red;
}

.contact-row::after{
	content:"";
	display: block;
	width:0px;
	height:0px;
	overflow: hidden;
	clear: both;
}

.contact-row:nth-child(2){
	margin-top:31px;
}

.contact-row:nth-child(2) > div{
	width:100%;
	display: block;
}

.contact-row:nth-child(2) > div textarea{
	width:95%;
	font-size:20px;
}

.contact-row:last-child{
	text-align:right;
	width:95.5%;
}

.contact-row:last-child button{
	width:15%;
	height:40px;
	line-height:40px;
	text-align:center;
	background:#fcac45;
	color:#fff;
	font-size:16px;
	font-family: Ossb;
	border:0px;
	margin-top:31px;
}

/* contact end */

.footer{
	width:100%;
	background:#000;
	padding:31px 0px;
}

.copyright{
	float:left;
	text-transform: uppercase;
	font-size:12px;
}

.copyright span{
	font-family: Ossb;
}

.links{
	float:right;
	margin-right:55px;
}

.links a{
	border:3px solid #b2b2b2;
	border-radius: 100%;
	overflow: hidden;
	background:#222222;
	width:32px;
	height:31px;
	margin-right:14px;
}

.links a:last-child{
	margin-right:0px;
}






/* 兼容处理 */
/* x <= 700 */
@media screen and (max-width:700px){
	.nav{
		display: none;
	}

	.menu{
		display: inline-block;
		transition: all .2s linear;
	}

	.nav{
		width:100%;
	}

	.nav a{
		width:100%;
		text-align:center;
	}

	input[name="nav"]:checked + .header .container .nav{
		display: block;
	} 

	input[name='nav']:checked + .header .container .menu{
		transform:rotate(90deg);
	}
	input[name="nav"]:checked ~ .banner a{
		display: none;
	}
	input[name="nav"]:checked ~ .banner{
		padding-top: 65px;
	}
	.banner a{
		margin-top: 140px;
		margin-bottom: 40px;
	}
}

/* about */
@media screen and (max-width:1000px){
	.about_box{
		background:none;
	}
	.about_content{
		width:100%;
	}
}

/* team */
/* x<=550px 处理头像 */
@media screen and (max-width:550px){
	.teamlist{
		display: block;
	}
	.teamlist>div{
		flex-basis: 100%;
		text-align:left;
		margin-bottom:15px;
		overflow: hidden;
	}

	.teamlist>div::after{
		content:"";
		width:0;
		height:0;
		overflow: hidden;
		display: block;
		clear:both;
	}

	.teamlist .image{
		float:left;
		margin-right:10px;
	}

	.teamlist h3{
		margin-top:0px;
	}

	.teamlist span,.teamlist p{
		float:left;
	}

	.teamlist p{
		margin-top:10px;
		width:63%;
	}

	
	input[id="img1"]:checked~.run1{
		display: block;
	}
	input[id="img1"]:checked~.run2,
	input[id="img1"]:checked~.run3{
		display: none;
	}
	input[id="img2"]:checked~.run2{
		display: block;
	}
	input[id="img2"]:checked~.run1,
	input[id="img2"]:checked~.run3{
		display: none;
	}
	input[id="img3"]:checked~.run3{
		display: block;
	}
	input[id="img3"]:checked~.run1,
	input[id="img3"]:checked~.run2{
		display: none;
	}

	/* 处理图标 */
	.services-title{
		font-size:24px;
		text-align:center;
	}
	.serviceslist{
		display: block;
	}
	.serviceslist>div{
		flex-basis: 100%;
		text-align:left;
		margin-bottom:15px;
		overflow: hidden;
	}

	.serviceslist>div::after{
		content:"";
		width:0;
		height:0;
		overflow: hidden;
		display: block;
		clear:both;
	}

	.serviceslist .image{
		float:left;
		margin-right:10px;
		width:35%;
	}
	.serviceslist h3{
		margin-top:0px;
	}

	.serviceslist p{
		float:left;
		margin-top:10px;
		width:57%;
	}
	/* work手机媒体查询 */
	.work-data{
		column-count: 1;
	}
}
@media sceeen and (max-width:478px){
	.banner a{
		margin-top: 140px;
		margin-bottom: 0px;
	}
	
}
@media screen and (max-width:400px){
	.teamlist p{
		width:50%;
	}
	.serviceslist p{
		width:50%;
	}
}
@media screen and (max-width:610px){
	.work-list-title{
		display: none;
	}

	.work-nav{
		width:100%;
	}
}

@media screen and (max-width:500px){
	.contact-row:last-child button{
		font-size:12px;
	}
}

@media screen and (max-width:630px){
	.links{
		width:100%;
		margin:0px;
		margin-top:15px;
	}

	.links a{
		margin-right:8%;
	}

	.links a:last-child{
		margin-right:0px;
	}
}